﻿@using Masuit.MyBlogs.Domain.Entity
@using Masuit.MyBlogs.Domain.Enum
@using Masuit.MyBlogs.Services.DTO
@using Masuit.Tools.Helper
@using Masuit.Tools
@model List< Donate>

@{
    ViewBag.Title = "网站打赏";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Random r = new Random();
}
<style>
    .bg-title {
        height: 50vh;
        max-height: 400px;
        position: relative;
        background: url(/Content/images/@(r.Next(1,9)).jpg) no-repeat center;
        background-size:cover;
        background-attachment: fixed;
    }
    .flex-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .flex-box>div{
        margin: 0 15px;
        width: 18%;
    }
    @@media only screen and (max-width: 1080px) {
        .flex-box>div{
            width: 29.8%;
        }
    }
</style>
<script src="https://cdn.staticfile.org/angular.js/1.7.7/angular.min.js"></script>
<script src="~/Scripts/tm.pagination.js"></script>
<script src="~/Scripts/ng-table.min.js"></script>
<ol class="cd-breadcrumb triangle">
    <li><a asp-controller="Home" asp-action="Index">首页</a></li>
    <li class="current"><em>@ViewBag.Title</em></li>
</ol>
<div class="bg-title">
    <div class="header-content text-center">
        <h1 class="size48">
            喜欢我的作品和文章？
        </h1>
        <div class="divider"></div>
        <p class="size24">
            您的捐助就是给我最大的鼓励
        </p>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="page-header margin-clear margin-top10">
                <h2 class="size28">
                    支付宝二维码
                </h2>
            </div>
            <img class="img-responsive img-thumbnail" style="width: 100%" src="@CommonHelper.SystemSettings["Donate"]" />
        </div>
        <div class="col-md-4">
            <div class="page-header margin-clear margin-top10">
                <h2 class="size28">
                    微信二维码
                </h2>
            </div>
            <img class="img-responsive img-thumbnail" style="width: 100%" src="@CommonHelper.SystemSettings["DonateWechat"]" />
            <div class="protected">
                <span class="text-red size20">注意：支付宝和微信无法看见支付人的名称，所以打赏时最好附上完整个人信息，否则无法将您加入到赞助名单中。</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="page-header margin-clear margin-top10">
                <h2 class="size28">
                    QQ二维码
                </h2>
            </div>
            <img class="img-responsive img-thumbnail" style="width: 100%" src="@CommonHelper.SystemSettings["DonateQQ"]" />
        </div>
    </div>
</div>
<div class="container margintop20">
    <div class="text-green size20" style="line-height: 26px;">
        <p>
            本网站由博主一个人打造，开发和运营均为博主本人，如果您是真心喜欢本博客，您可以对博主表示一下感谢，以支持后期发布更多好资源，5毛也好、1元也罢，都是你们的心意。网站运营也需要成本，有你的援助，一切会更好。
        </p>
        <p class="text-red size20">
            打赏时最好能够附上你的完整信息，包括：您的昵称或真名、邮箱地址、QQ或微信、金额等；因为不能保证能够完全的清楚打赏者的基本信息，如果你完成了打赏，推荐你在网站留言板备注一下，或者QQ私信告知你是谁。
        </p>
        <p>
            您可以尽您所能地打赏，如果您临时改变主意，您可以在事后一个月之内联系作者申请退款！
        </p>
        <p>
            本站的宗旨是：互联网分享精神，乐于发现，勤于分享；
        </p>
        <p>
            我希望的：您将我的网站告诉你的朋友，让更多的人来这里学习，共同进步。
        </p>
    </div>
</div>
<div class="container-fluid" ng-app="myApp" ng-controller="home as list">
    <div class="page-header margin-clear">
        <h2 class="size24">
            打赏名单(排名不分先后)：
        </h2>
    </div>
    <table ng-cloak ng-table="list.tableParams" class="table table-bordered table-hover table-condensed margin-clear" ng-form="list.tableForm" disable-filter="list.isAdding" tracked-table="list.tableTracker" style="margin: 0">
        <tr ng-repeat="row in $data" ng-form="rowForm" tracked-table-row="row">
            <td title="'打赏时间'" sortable="'DonateTime'">
                {{row.DonateTime|date:'yyyy-MM-dd'}}
            </td>
            <td title="'昵称'" sortable="'NickName'">
                {{row.NickName}}
            </td>
            <td title="'邮箱'" sortable="'Email'">
                {{row.EmailDisplay}}
            </td>
            <td title="'QQ或微信'" sortable="'QQorWechat'">
                {{row.QQorWechatDisplay}}
            </td>
            <td title="'金额'" sortable="'Amount'">
                {{row.Amount}}
            </td>
            <td title="'打赏方式'" sortable="'Via'">
                {{row.Via}}
            </td>
        </tr>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script>
    var app = angular.module('myApp', ["ngTable", "tm.pagination"]);
    app.config(["$httpProvider", function ($httpProvider) {
        $httpProvider.defaults.transformRequest = function (obj) {
            var str = [];
            for (var p in obj) {
                if (obj.hasOwnProperty(p)) {
                    str.push(window.encodeURIComponent(p) + "=" + window.encodeURIComponent(obj[p]));
                }
            }
            return str.join("&");
        };

        $httpProvider.defaults.headers.post = {
            'Content-Type': 'application/x-www-form-urlencoded; charser=UTF-8'
        }
    }]);
    app.controller("home", ["$scope", "$http", "NgTableParams", function ($scope, $http, NgTableParams) {
        var self = this;
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 10,
            pagesLength: 15,
            perPageOptions: [10, 15, 20, 30, 50, 100],
            rememberPerPage: 'perPageItems',
            onChange: function () {
                window.loading();
                $http.post("/DonateList", {
                    page: $scope.paginationConf.currentPage,
                    size: $scope.paginationConf.itemsPerPage
                }).then(function (res) {
                    $scope.paginationConf.totalItems = res.data.TotalCount;
                    $("div[ng-table-pagination]").remove();
                    self.tableParams = new NgTableParams({
                        count: 50000
                    }, {
                        filterDelay: 0,
                        dataset: res.data.Data
                    });
                    window.loadingDone();
                });
            }
        };
    }]);
</script>